
import React, { useEffect, useState } from 'react'
import {home1} from '../../request'
import { CopyOutlined,UserAddOutlined , DollarOutlined } from '@ant-design/icons';
import Highcharts from 'highcharts/highstock';



import './home.css'




export default (props) => {
    const [home,setHome] = useState(null)
    const [goodsRadio,setGoodsRadio] = useState(null)
    useEffect(()=>{
        getMsg();
        getGoodsRatio();

    },[])

    // 实现思路：由于echart图形图表需要用到请求到的数据
    useEffect(()=>{
        if(home&&goodsRadio){
            getcontainer1();
            getcontainer2();
        }

    },[home,goodsRadio])


    //请求数据
    const getMsg = async() =>{
        const {data:res} = await home1.getHome()
        if(res.code === 200){

            setHome(res.data)
        }else{
            console.log('请求数据失败');
        }
    }


    //请求数据商品访问量&售卖量
    const getGoodsRatio = async()=>{
        const {data:res} = await home1.getGoodsRatio()
        if(res.code >= 200 && res.code <= 300){

            setGoodsRadio(res.data)
        }else{
            console.log('请求数据失败');
        }
    }



    //男女比例echart图形图表部分
    const getcontainer1 = ()=>{



        Highcharts.chart('container1', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: ''
            },

            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: '女生',
                    y: home.womanNumber,
                    sliced: true,
                    selected: true
                }, {
                    name: '男生',
                    y: home.manNumber
                }]
            }]
        })
    }


    //店铺访问次数echart图形图表部分
    const getcontainer2 = ()=>{
        console.log(home)
        Highcharts.chart('container2',{
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            xAxis: {

                categories: goodsRadio.map((item, index)=>{
                    return item.title_text
                }),
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数 (个)'
                }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                }
            },
            series: [{
                name: '商品浏览量',
                data:  goodsRadio.map((item, index)=>{
                    return item.comm_click
                })
            }, {
                name: '商品销售量',
                data:goodsRadio.map((item, index)=>{
                    return item.comm_mai
                })
            }]
        });
    }



    return(
        !home || !goodsRadio ? <div>加载</div>:
        <div>

            <div className={'home'}>
                <header>
                    <div className={'title'}>新增数据统计</div>
                    <ul className={'head-con'}>
                        <li>
                            <div className={'icon'} >
                                <CopyOutlined/>
                            </div>
                            <div className={'number'}>{home.adNumber}</div>
                            <div className={'name'}>广告总数</div>
                        </li>
                        <li>
                            <div className={'icon'}>
                                <UserAddOutlined/>
                            </div>
                            <div className={'number'}>{home.manNumber + home.womanNumber}</div>
                            <div className={'name'}>用户总数</div>
                        </li>
                        <li>
                            <div className={'icon'}>
                                <DollarOutlined/>
                            </div>
                            <div className={'number'}>{home.userNumber}</div>
                            <div className={'name'}>总订单量</div>
                        </li>
                    </ul>
                </header>

                {/*中间echart图标部分*/}
                <section className={'chart'}>
                    <div className={'left-chart'}>
                        <div className={'title'}>用户男女比例</div>
                        <div id="container1" style={{minWidth:350,height:350}}></div>
                    </div>
                    <div className={'right-chart'}>
                        <div className={'title'}>商品访问量&售卖量</div>
                        <div id="container2" style={{minWidth:800,height:400}}></div>
                    </div>

                </section>

                {/*结尾图表部分*/}
                <footer>
                    <div className={'title'}>商品库存量(个)</div>
                    <table border={'1'} style={{width:1200}}>
                        <tr>
                            {
                                goodsRadio.map((item, index)=>{
                                    return <th>{item.title_text}</th>
                                })
                            }
                        </tr>
                        <tr>
                            {
                                goodsRadio.map((item, index)=>{
                                    return <td>{item.comm_num}</td>
                                })
                            }
                        </tr>
                    </table>

                </footer>
            </div>
        </div>

    );
};

